import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  NavLink 
} from 'react-router-dom'

const getConfirmation = (message, callback) => {
  const allowTransition = window.confirm(message)
  callback(allowTransition)
}
const Home = () => {
  return <p> home </p>;
}
const About = () => {
  return <p> About </p>;
}
const Hello = () => (
  <Router getUserConfirmation={getConfirmation}>
    <div>
      <h1>hello, world</h1>
      <hr/>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
        <li><Link to={{
          pathname: '/About',
          search: '?sort=name',
          hash: '#the-hash',
          state: { fromDashboard: true }
        }}> link object</Link></li>
        <li><NavLink to="/about">About</NavLink></li>
        <li><NavLink to="/faq" activeClassName="selected">FAQs</NavLink></li>
        <li><NavLink  exact
            to="/faq"
            activeStyle={{
              fontWeight: 'bold',
              color: 'red'
             }}
          >FAQs</NavLink></li>
      </ul>
      <div style={ {border:'1px solid #ccc'} }>
        <Route exact path="/" component={Home}/>
        <Route exact path="/about" component={About}/>
        <Route render={ ()=> <p> always show</p> } />
      </div>
    </div>
  </Router>
)

export default Hello